<template>
  <div class="card-container">
    <TableCard
      v-for="i in 20"
      :key="i"
      :isOccupied="i % 2 === 0"
      :tableNumber="i"
      :seatStatuses="[
        { isOccupied: i % 2 === 0, time: i % 2 === 0 ? '0小时20分' : '-' },
        { isOccupied: i % 2 !== 0, time: i % 2 !== 0 ? '0小时10分' : '-' }
      ]"
    />
  </div>
</template>

<script lang="ts">
// import { defineComponent } from 'vue';
import TableCard from './TableCard.vue';
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    TableCard
  }
});
</script>

<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* 设置卡片之间的间距 */
  justify-content: center; /* 居中对齐 */
  align-items: center;
  padding: 8px;
}

.table-card {
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时缩放卡片 */
.table-card:hover {
  transform: scale(1.1); /* 缩放比例，可以根据需要调整 */
}
</style>

